<template>
  <div>
    <button @click="add">{{ count }}</button>
    <p>{{ double }}</p>
  </div>
</template>

<script>
import { computed, reactive, toRefs } from "vue";
export default {
  setup() {
    // reactive函数可以设置复杂类型的数据给页面使用
    const state = reactive({
      count: 0,
      add() {
        state.count++;
      },
      double: computed(() => {
        return state.count * 2;
      }),
    });
    // toRefs可以将reactive函数 创建的对象 转化为 模板能够理解的 普通对象
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style>
</style>